<template>
  <div class="containter">
    <div class="step">
      <ol class="titt">
        <el-badge
          :value="item.num"
          :max="99"
          :hidden="item.num == 0"
          class="item"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-button
            class="button"
            size="mini"
            :class="activeIndex == index ? 'cur' : ''"
            :disabled="item.num == 0"
            @click="goAssignBlock('panelRef' + index, 100, index)"
          >{{ item.text }}</el-button>
        </el-badge>
      </ol>
    </div>
    <div
      ref="panelRef0"
      class="basicInfo basicInfo7"
    >
      <p class="title"><span>用能分析</span></p>
      <div class="echart">
        <div id="socialTwo"></div>
        <div class="cbrs">
          <div id="endowmentTwo"></div>
        </div>
      </div>
    </div>
    <div
      ref="panelRef1"
      class="basicInfo basicInfo7"
    >
      <p class="title"><span>用能信息</span></p>
      <el-table
        :data="ynxxData"
        style="width: 100%"
        v-loading="loading1"
        :header-cell-style="{ background: '#f2f9fe' }"
        :empty-text="scxx && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="nf"
          label="年份"
          align="center"
        />
        <el-table-column
          prop="ys"
          label="用水(吨)"
          align="center"
        />
        <el-table-column
          prop="ysjf"
          label="用水缴费金额(元)"
          align="center"
        />
        <el-table-column
          prop="yq"
          label="用气(立方米)"
          align="center"
        />
        <el-table-column
          prop="yqjf"
          label="用气缴费金额(元)"
          align="center"
        />
      </el-table>
    </div>
    <div
      ref="panelRef2"
      class="basicInfo basicInfo7"
    >
      <p class="title">
        <span>缴费信息</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="jfxxData"
        style="width: 100%"
        v-loading="loading2"
        :header-cell-style="{ background: '#f2f9fe' }"
        :empty-text="scxx && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="jflxm"
          label="缴费类型"
          align="center"
        />
        <el-table-column
          prop="sfyjf"
          label="是否已缴费"
          align="center"
        />
        <el-table-column
          prop="jlksyhr"
          label="计量开始日期"
          align="center"
        />
        <el-table-column
          prop="jljzyhr"
          label="计量截止日期"
          align="center"
        />
        <el-table-column
          prop="syl"
          label="使用量"
          align="center"
        />
        <el-table-column
          prop="sydw"
          label="单位"
          align="center"
        />
        <el-table-column
          prop="jfje"
          label="缴费金额(元)"
          align="center"
        />
      </el-table>
    </div>
    <div
      ref="panelRef3"
      class="basicInfo basicInfo7"
    >
      <p class="title">
        <span>欠缴信息</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="qjxxData"
        style="width: 100%"
        v-loading="loading3"
        :header-cell-style="{ background: '#f2f9fe' }"
        :empty-text="scxx && (sqStatu == '未授权') ? '企业暂未授权' : '暂无查看权限'"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="qjlxmc"
          label="欠缴类型"
          align="center"
        />
        <el-table-column
          prop="qjtjksrq"
          label="拖缴欠缴开始日期"
          align="center"
        />
        <el-table-column
          prop="qjtjjzrq"
          label="拖缴欠缴截止日期"
          align="center"
        />
        <el-table-column
          prop="qfje"
          label="欠缴金额(元)"
          align="center"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getQyystb, getQyyqtb } from '@/api/portay'
export default {
  props: ['comInfo','scxx','sqStatu'],
  data() {
    return {
      activeIndex: 'a',
      cbzl: '养老保险',
      list: [
        { text: '用能分析', disabled: false },
        { text: '用能信息', disabled: false },
        { text: '缴费信息', disabled: false },
        { text: '欠缴信息', disabled: false },
      ],
      month: '',
      loading1: false,
      ynxxData: [], //用能信息
      loading2: false,
      jfxxData: [], //缴费信息
      dialogVisible2: false,
      pagination2: { page: 1, total: 0 },
      jfxxMoreData: [],
      loading3: false,
      qjxxData: [], //欠缴信息
      dialogVisible3: false,
      pagination3: { page: 1, total: 0 },
      qjxxMoreData: [],
      isJfData: '',
      jfType: '',
      qjType: '',
      qjTypeLoading: false,
      jfInfoLoading: false,
      QJLXMC: '',
    }
  },
  created() {
    this.getDict()
    this.$nextTick(() => {
      this.getSocial() //企业用水
      this.getEndowment() //企业用气
    })
  },
  /* watch: {
    comInfo: {
      handler(newVal, oldVal) {
        if (newVal.shtyxydm) {
          this.getSocial() //企业用水
          this.getEndowment() //企业用气
        }
      },
      deep: true,
      immediate: true,
    },
  }, */
  methods: {
    async getDict() {
      const dataSQQD = await this.$store.dispatch('asyncApi/getDict', {
        code: 'zxgslxr',
      })
      this.open(dataSQQD[0].value)
    },
    open(e) {
      let str = (this.scxx && (this.sqStatu == '未授权')) ? '您查询的企业暂未授权，无法查看当前信息!' : `您当前暂无相关内容查看权限，\n如需开通权限请及时联系淄博征信有限公司:${e}`
      this.$alert(str,'提示',
        {
          confirmButtonText: '关闭',
          center: true,
          dangerouslyUseHTMLString: true,
          callback: (action) => {},
        }
      )
    },
    //企业用水
    getSocial() {
      let str = (this.scxx && (this.sqStatu == '未授权')) ? '企业暂未授权' : '暂无查看权限'
      var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;">企业用水</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">${str}</span></div>`
      document.getElementById('socialTwo').innerHTML = html
      document.getElementById('socialTwo').removeAttribute('_echarts_instance_')
      /* getQyystb().then((res) => {
        let xData = []
        let data = []
        let hbData = []
        let tbData = []
        let pjzData = []
        res.data.tb.forEach((item) => {
          xData.push()
          data.push()
          hbData.push()
          tbData.push()
          pjzData.push()
        })
        this.$nextTick(() => {
          this.getSocialTrend(xData, data, hbData, pjzData, tbData)
        })
      }) */
    },
    //企业用水
    getSocialTrend(xData, data, hbData, pjzData, tbData) {
      if (false) {
        let chartDom = document.getElementById('socialTwo')
        let socialChart = echarts.init(chartDom)
        let option

        option = {
          title: {
            text: '企业用水\n单位：吨',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
            },
            formatter: function (params) {
              var str = '' //声明一个变量用来存储数据
              str += '<div>' + params[0].name + '</div>' //显示日期的函数
              for (var i = 0; i < params.length; i++) {
                str +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                  params[i].color +
                  ';"></span>' +
                  params[i].seriesName +
                  '</span> : <span>' +
                  (params[i].seriesName == '用水量' ||
                  params[i].seriesName == '月均用水量'
                    ? params[i].data + '吨'
                    : params[i].data) +
                  '</br>'
              }
              return str
            },
          },
          color: ['#8080ff', '#8080ff', '#8080ff', '#02a7f0'],
          legend: {
            show: true,
            data: ['用水量', '月均用水量'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: xData,
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '用水量',
              data: data,
              type: 'line',
              barWidth: 30,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#8080ff',
                  },
                },
              },
            },
            {
              name: '环比增长',
              data: hbData,
              type: 'line',
              barWidth: 30,
            },
            {
              name: '同比增长',
              data: tbData,
              type: 'line',
              barWidth: 30,
            },
            {
              name: '月均用水量',
              type: 'line',
              data: pjzData,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: 'dotted', //'dotted'虚线 'solid'实线
                  },
                },
              },
            },
          ],
        }

        option && socialChart.setOption(option)
        window.addEventListener('resize', () => {
          socialChart.resize()
        })
      } else {
        // 以下是暂无数据显示样式(样式根据本身需求进行调整)
        var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;">企业用水</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无查看权限</span></div>`
        document.getElementById('socialTwo').innerHTML = html
        document
          .getElementById('socialTwo')
          .removeAttribute('_echarts_instance_')
      }
    },
    //企业用气
    getEndowment() {
      let str = (this.scxx && (this.sqStatu == '未授权')) ? '企业暂未授权' : '暂无查看权限'
      var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;">企业用气</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">${str}</span></div>`
      document.getElementById('endowmentTwo').innerHTML = html
      document.getElementById('endowmentTwo').removeAttribute('_echarts_instance_')
      /* getQyyqtb({ TYSHXYDM: this.comInfo.shtyxydm, bxlx: this.cbzl }).then(
        (res) => {
          let xData = []
          let data = []
          let hbData = []
          let tbData = []
          let pjzData = []
          res.data.tb.forEach((item) => {
            xData.push()
            data.push()
            hbData.push()
            tbData.push()
            pjzData.push()
          })
          this.$nextTick(() => {
            this.getEndowmentTrend(xData, data, hbData, pjzData, tbData)
          })
        }
      ) */
    },
    //企业用气
    getEndowmentTrend(xData, data, hbData, pjzData, tbData) {
      if (false) {
        let chartDom = document.getElementById('endowmentTwo')
        let endowmentChart = echarts.init(chartDom)
        let option

        option = {
          title: {
            text: '企业用气\n单位：立方米',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
            },
            formatter: function (params) {
              var str = '' //声明一个变量用来存储数据
              str += '<div>' + params[0].name + '</div>' //显示日期的函数
              for (var i = 0; i < params.length; i++) {
                str +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                  params[i].color +
                  ';"></span>' +
                  params[i].seriesName +
                  '</span> : <span>' +
                  (params[i].seriesName == '用气量' ||
                  params[i].seriesName == '月均用气量'
                    ? params[i].data + '立方米'
                    : params[i].data) +
                  '</br>'
              }
              return str
            },
          },
          color: ['#8080ff', '#8080ff', '#8080ff', '#02a7f0'],
          legend: {
            data: ['用气量', '月均用气量'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: xData,
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '用气量',
              data: data,
              type: 'line',
              barWidth: 30,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#8080ff',
                  },
                },
              },
            },
            {
              name: '环比增长',
              data: hbData,
              type: 'line',
              barWidth: 30,
            },
            {
              name: '同比增长',
              data: tbData,
              type: 'line',
              barWidth: 30,
            },
            {
              name: '月均用气量',
              data: pjzData,
              type: 'line',
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: 'dotted', //'dotted'虚线 'solid'实线
                  },
                },
              },
            },
          ],
        }
        option && endowmentChart.setOption(option)
        window.addEventListener('resize', () => {
          endowmentChart.resize()
        })
      } else {
        var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;">企业用气</sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无查看权限</span></div>`
        document.getElementById('endowmentTwo').innerHTML = html
        document
          .getElementById('endowmentTwo')
          .removeAttribute('_echarts_instance_')
      }
    },
    // 点击导航栏，滚动条移动到内容所对应的位置
    goAssignBlock(el, speed, index) {
      this.activeIndex = index
      let windowH = window.innerHeight //浏览器窗口高度
      let h = this.$refs[el].offsetHeight //模块内容高度
      let t = this.$refs[el].offsetTop //模块相对于内容顶部的距离
      let top = t - (windowH - h) / 2 //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop //滚动条距离顶部高度
      let currentTop = scrollTop //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId
      //采用requestAnimationFrame，平滑动画
      function step() {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向下滚动
          currentTop += speed
        } else {
          if (top <= currentTop) {
            //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
            window.scrollTo(0, currentTop - speed)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向上滚动
          currentTop -= speed
        }
      }
      window.requestAnimationFrame(step)
    },
  },
}
</script>

<style scoped lang="scss">
.containter {
  width: 100%;
  .step {
    ol.titt {
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin: 0;
      padding: 0;
      font-size: 14px;
      position: fixed;
      top: 350px;
      right: 24px;
      z-index: 999;
    }
    ol.titt .button {
      width: 150px;
      margin: 0;
    }
    ol.titt .button.cur {
      background-color: #5591f5;
      color: #fff;
    }
  }
  .basicInfo {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    padding: 12px 174px 12px 24px;
    margin-top: 20px;
  }
  .basicInfo1 {
    .table {
      width: 100%;
      height: 340px;
      border-collapse: collapse;
      th,
      td {
        width: 238px;
        height: 56px;
        border: #ccc solid 1px;
      }
      th {
        background-color: #f2f9fe;
      }
      td {
        padding-left: 10px;
        text-align: left;
      }
      .jyfw {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .basicInfo7 {
    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .echart {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      #socialTwo,
      #endowmentTwo,
      #gjjjcje,
      #gjjjcrs {
        width: 700px;
        height: 500px;
        border-radius: 4px;
        padding: 12px;
        box-shadow: 0 0 10px #e8eaef;
      }
      .cbrs {
        position: relative;
        .cbzl {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 1;
        }
        #endowmentTwo {
          position: relative;
          z-index: 0;
        }
      }
    }
  }
}
.title {
  font-size: 18px;
  font-weight: 900;
}
.glqy {
  color: #ccc;
  margin-left: 24px;
}
.glqy:hover {
  cursor: pointer;
}
.block {
  width: 100%;
  display: flex;
  height: 60px;
  align-items: center;
}
.item {
  margin-top: 4px;
  margin-right: 16px;
}
</style>
<style>
.dialog {
  border-radius: 10px;
  padding-bottom: 50px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 200px);
  max-width: calc(100% - 30px);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>